<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- <style>
        * {
            color: red;
        }
    </style>
    <p>HTML</p>
    <p>HTML</p>
    <div>CSS</div>
    <div>CSS</div> -->
    <!-- <style>
        .one a {
            color: pink;
        }
    </style>
    <ul class="one">
        <li><a href="http://www.baidu.com">你好!</a></li>
        <li>你好!</li>
        <li>你好!</li>
    </ul> -->
    <!-- <style>
        .cat>ul>li>a {
            color: red;
        } 
    </style>
    <div class="cat">
        <a href="#">不好</a>
        <ul>
            <li><a href="#">你好</a></li>
            <li><a href="#">你好</a></li>
        </ul>
    </div> -->
    <!-- <style>
        div,h3,ul>li {
            color: red;
        }
    </style>
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul> -->
    <!-- <style>
        /* 未被访问过的链接是黑色 */
        a:link {
            color: black;
            /* 去掉下划线 */
            text-decoration: none;
        }
        /* 被访问过之后是红色 */
        a:visited {
            color: red;
        }
        /* 鼠标悬停的时候是蓝色 */
        a:hover {
            color: blue;
        }
        /* 鼠标按下但没松的时候是绿色 */
        a:active {
            color: green;
        }
    </style>
    <a href="http://www.sougou.com">你好</a> -->
    <!-- <style>
        div>input:focus {
            color: red;
        }
    </style>
    <div>
        <input type="text">
    </div> -->
    <!-- <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: #00ff00; 
        }
        .p3 {
            color: rgb(0,0,255);
        }
    </style>
    <p class="p1">你好 你好 你好</p>
    <p class="p2">不好 不好 不好</p>
    <p class="p3">很好 很好 很好</p> -->
    <!-- <style>
        .one {
            line-height: 30px;
        }
        .two {
            line-height: 20%;
        }
    </style>
    <div class="one">你好<br/>你好<br/>你好</div><br/>
    <div class="two">你好<br/>你好<br/>你好</div> -->
    <!-- <style>
        .one {
            background-image: url(male.png);
            height: 300px;
            background-size: 50px;
        }
        .two{
            background-image: url(male.png);
            height: 300px;
            background-size: 50%;
        }
        .three{
            background-image: url(male.png);
            height: 300px;
            background-size:cover
        }
        .four{
            background-image: url(male.png);
            height: 300px;
            background-size: contain;
        }
    </style>
    <div class="one">你好</div>
    <div class="two">你好</div>
    <div class="three">你好</div>
    <div class="four">你好</div> -->
    <!-- <style>
        .one .parent{
            width: 500px;
            height: 300px;
            background-color: red;
        }
        .one .child{
            /* 这里width没设置,默认是父级的 */
            height: 200px;
            background-color: blue;
        }
    </style>
    <div class="one">
        <div class="parent">
            <div class="child">
                child1
            </div>
        </div>
    </div> -->
    <!-- <style>
        span{
            width: 300px;
            height: 500px;
            background-color: red;
        }
    </style>
    <span>你好~</span> -->
    <!-- <style>
        /* 这里用通配符解决了问题 */
        * {
            box-sizing: border-box;
        }
        div {
            height: 200px;
            width: 200px;
            border: 10px solid green;
        }
    </style>
    <div>你好</div> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            background-color: green;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
    <div>你好</div>
</body>
</html>